<template>
	<view class="container">
		<view class="main-title">我的收藏</view>
		<view class="star" v-if="starList&&starList.length!==0">
			<view class="item" v-for="item in starList" :key="item.starID" @click="handleRemove(item)">
				<view style="font-size: 30rpx;" class="t-icon" :class="'t-'+item.icon"></view>
				{{item.moduleName}}
				<view class="icon t-icon t-icon-jianhao"></view>
			</view>
		</view>
		<view v-else class="no-data">点击下方图标收藏</view>
		<view class="main-title">更多应用</view>
		<view class="module" v-for="item in categoryList" :key="item.categoryID">
			<view class="title">{{item.category}}</view>
			<view class="items">
				<view class="item" v-for="item in list.filter(i=>i.category===item.category)"
					v-if="list.filter(i=>i.category===item.category).length!==0" @click="handleAdd(item)">
					<view style="font-size: 30rpx;" class="t-icon" :class="'t-'+item.icon"></view>
					{{item.moduleName}}
					<view class="icon t-icon t-icon-jiahao"></view>
				</view>
				<view class="no-data" v-else>
					暂无内容
				</view>
			</view>
		</view>
	</view>
	<Loading />
</template>

<script setup>
	import {
		GetModuleCategory,
		GetModuleList,
		GetStarModule,
		AddStarModule,
		RemoveStarModule
	} from "@/apis/module.js"
	import {
		nextTick,
		onBeforeMount,
		ref,
	} from "vue";
	import Loading from "@/components/Loading.vue"

	const list = ref([]);
	const categoryList = ref([]);
	const starList = ref([]);

	function handleRemove(e) {
		RemoveStarModule({
			starID: e.starId
		}).then(() => {
			refresh();
		})
	}

	function handleAdd(e) {
		AddStarModule({
			moduleID: e.moduleID
		}).then(() => {
			refresh();
		})
	}

	function refresh() {
		let listArr = [];
		GetModuleList().then(res => {
			listArr = res.data;
		})
		GetModuleCategory().then(res => {
			categoryList.value = res.data;
		})
		GetStarModule().then(res => {
			starList.value = res.data;
			if (starList.value)
				list.value = listArr.filter(item => !res.data.some(i => item.moduleID === i.moduleId))
			else list.value = listArr;
		})
	}

	onBeforeMount(() => {
		refresh();
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;

		.main-title {
			text-align: center;
			font-weight: bold;
			padding: 20rpx 0;
			color: #333;

			&:last-child {
				padding-bottom: 0;
			}
		}

		.star {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			justify-content: space-between;
			align-items: center;
			gap: 20rpx;

			.item {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 24rpx;
				padding: 10rpx;
				gap: 10rpx;

				.icon {
					position: absolute;
					top: 0;
					right: 0;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
				}

				&:active {
					filter: contrast(0.8);
					background-color: #ececec;
				}
			}
		}

		.module {
			margin-bottom: 20rpx;

			.title {
				padding: 20rpx;
				font-size: 30rpx;
				font-family: SmileySans;
				// font-weight: bold;
				color: #333;
			}

			.items {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				justify-content: space-between;
				align-items: center;
				gap: 20rpx;

				.item {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-size: 24rpx;
					padding: 10rpx;
					gap: 10rpx;

					.icon {
						position: absolute;
						top: 0;
						right: 0;
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
					}

					&:active {
						filter: contrast(0.8);
						background-color: #ececec;
					}
				}
			}
		}
	}

	.no-data {
		text-align: center;
		color: #333;
		font-size: 24rpx;
	}
</style>
